<template>
    <div id="newsDetail">
        <el-row>
            <el-col :span="16" :offset="4">
                <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">玖玖盈</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/news' }">新闻中心</el-breadcrumb-item>
                    <el-breadcrumb-item>{{newsTitle}}</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="news-contain" v-if="news">
                    <h3 class="news-title">{{news.articleTitle}}</h3>
                    <p class="news-time">{{formatTime(news.time)}}</p>
                    <div class="news-content" v-html="news.articleContent"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getArticleById } from '@/api/api'
export default {
    data: function() {
        return {
            news: null,
            newsTitle: ''
        }
    },
    created: function() {
        var id = this.$route.query.id;
        if(!id){
            this.$message.error('新闻id不存在')
            this.router.back()
            return;
        }
        getArticleById(id).then(res => {
            this.news = res;
            this.newsTitle = res.articleTitle;
        })
    },
    methods: {
        formatTime: function(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + sec;
        }
    }
}

</script>
<style scoped>
.news-title{
    text-align: center;
    font-size: 36px;
    font-weight: normal;
}
.news-content{
    font-size: 18px;
}
.news-time{
    text-align: center;
    font-size: 16px;
    margin: 0;
}
</style>
